<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>新增投注记录</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script>
        function toggleHandicapTeam() {
            const betType = document.querySelector('select[name="betType"]').value;
            const handicapTeamDiv = document.getElementById('handicapTeamDiv');
            const handicapTeamSelect = document.querySelector('select[name="handicapTeam"]');
            
            if (betType === '让球') {
                handicapTeamDiv.style.display = 'block';
                handicapTeamSelect.required = true; // 让球方必填
            } else {
                handicapTeamDiv.style.display = 'none';
                handicapTeamSelect.required = false; // 让球方不必填
                handicapTeamSelect.value = ''; // 清空选择
            }
        }
    </script>
</head>
<body>
    <div class="container mt-4">
        <h2>新增投注记录</h2>
        <c:if test="${not empty message}">
            <div class="alert alert-success">${message}</div>
        </c:if>
        <c:if test="${not empty error}">
            <div class="alert alert-danger">${error}</div>
        </c:if>
        <form action="${pageContext.request.contextPath}/bet/add" method="post" class="needs-validation" novalidate>
            <div class="mb-3">
                <label class="form-label">比赛时间</label>
                <input type="datetime-local" name="betTime" class="form-control" required>
                <form:errors path="betTime" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3">
                <label class="form-label">联赛名称</label>
                <input type="text" name="leagueName" class="form-control" required>
                <form:errors path="leagueName" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3">
                <label class="form-label">主队</label>
                <input type="text" name="homeTeam" class="form-control" required>
                <form:errors path="homeTeam" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3">
                <label class="form-label">客队</label>
                <input type="text" name="awayTeam" class="form-control" required>
                <form:errors path="awayTeam" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3">
                <label class="form-label">比赛类型</label>
                <select name="betType" class="form-select" required onchange="toggleHandicapTeam()">
                    <option value="">请选择</option>
                    <option value="让球">让球</option>
                    <option value="大小分">大小分</option>
                </select>
                <form:errors path="betType" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3" id="handicapTeamDiv" style="display: none;">
                <label class="form-label">让球方</label>
                <select name="handicapTeam" class="form-select">
                    <option value="">请选择</option>
                    <option value="HOME">主队</option>
                    <option value="AWAY">客队</option>
                </select>
                <form:errors path="handicapTeam" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3">
                <label class="form-label">盘口数值</label>
                <input type="text" name="handicapValue" class="form-control" required>
                <form:errors path="handicapValue" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3">
                <label class="form-label">水位</label>
                <input type="number" name="odds" class="form-control" step="0.01" required>
                <form:errors path="odds" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3">
                <label class="form-label">投注金额</label>
                <input type="number" name="betAmount" class="form-control" step="0.01" required>
                <form:errors path="betAmount" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3">
                <label class="form-label">比赛结果</label>
                <select name="betResult" class="form-select" onchange="calculateResult()">
                    <option value="">未结算</option>
                    <option value="WIN">赢</option>
                    <option value="HALF_WIN">赢一半</option>
                    <option value="DRAW">和</option>
                    <option value="HALF_LOSE">输一半</option>
                    <option value="LOSE">输</option>
                </select>
                <form:errors path="betResult" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3">
                <label class="form-label">结果金额</label>
                <input type="number" name="resultAmount" id="resultAmount" class="form-control" readonly value="0">
                <form:errors path="resultAmount" cssClass="text-danger"/>
            </div>
            
            <div class="mb-3">
                <label class="form-label">备注</label>
                <textarea name="note" class="form-control" rows="3"></textarea>
                <form:errors path="note" cssClass="text-danger"/>
            </div>
            
            <button type="submit" class="btn btn-primary">提交</button>
            <a href="/bet/list" class="btn btn-secondary">返回</a>
        </form>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    // 表单验证
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms).forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
    })()

    function calculateResult() {
        const betAmount = parseFloat(document.querySelector('input[name="betAmount"]').value) || 0;
        const odds = parseFloat(document.querySelector('input[name="odds"]').value) || 0;
        const result = document.querySelector('select[name="betResult"]').value;
        
        let resultAmount = 0;
        
        switch(result) {
            case 'WIN':
                resultAmount = betAmount * odds;
                break;
            case 'HALF_WIN':
                resultAmount = betAmount * odds * 0.5;
                break;
            case 'DRAW':
                resultAmount = 0;
                break;
            case 'HALF_LOSE':
                resultAmount = betAmount * -0.5;
                break;
            case 'LOSE':
                resultAmount = betAmount * -1;
                break;
        }
        
        document.getElementById('resultAmount').value = resultAmount.toFixed(2);
    }

    // 监听投注金额和水位的变化
    document.querySelector('input[name="betAmount"]').addEventListener('input', calculateResult);
    document.querySelector('input[name="odds"]').addEventListener('input', calculateResult);
    </script>
</body>
</html> 
 